<template>
  <el-form
    class="resume-edit"
    ref="form"
    :model="formData"
    :rules="rules"
    :label-suffix="$t('tip.colon')"
    label-width="120px"
    label-position="top"
  >
    <div class="resume-edit-title">编辑个人信息</div>
    <el-row :gutter="77">
      <el-col :span="12">
        <el-form-item prop="name" :label="$t('resume.name')">
          <el-input v-model="formData.name" :placeholder="$tInput()" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item prop="idCode" :label="$t('resume.idCode')">
          <el-input v-model="formData.idCode" :placeholder="$tInput()" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="77">
      <el-col :span="12">
        <el-form-item prop="sex" :label="$t('resume.sex')">
          <el-select v-model="formData.sex" :placeholder="$tSelect()">
            <el-option
              v-for="item in $enumList('GENDER')"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item prop="birthday" :label="$t('resume.birthday')">
          <el-date-picker
            v-model="formData.birthday"
            type="date"
            value-format="yyyy-MM-DD"
            :placeholder="$tSelect()"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="77">
      <el-col :span="12">
        <el-form-item prop="height" :label="$t('resume.height')">
          <el-input v-model="formData.height" :placeholder="$tInput()" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item prop="weight" :label="$t('resume.weight')">
          <el-input v-model="formData.weight" :placeholder="$tInput()" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="77">
      <el-col :span="12">
        <el-form-item prop="nation" :label="$t('resume.nation')">
          <el-select v-model="formData.nation" :placeholder="$tSelect('')">
            <el-option
              v-for="item in dictData['nation']"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item prop="marriage" :label="$t('resume.marriage')">
          <el-select v-model="formData.marriage" :placeholder="$tSelect('')">
            <el-option
              v-for="item in dictData['marriage']"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="77">
      <el-col :span="12">
        <el-form-item prop="parties" :label="$t('resume.parties')">
          <el-select v-model="formData.parties" :placeholder="$tSelect('')">
            <el-option
              v-for="item in dictData['politic_type']"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item prop="hukouType" :label="$t('resume.hukouType')">
          <el-select v-model="formData.hukouType" :placeholder="$tSelect('')">
            <el-option
              v-for="item in dictData['hukou_type']"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="77">
      <el-col :span="12">
        <el-form-item prop="hukouArea" :label="$t('resume.hukouAddr')">
          <el-cascader
            v-model="formData.hukouArea"
            :options="areaOptions"
            :props="{ value: 'name', label: 'name' }"
          ></el-cascader>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item prop="livingArea" :label="$t('resume.livingAddr')">
          <el-cascader
            v-model="formData.livingArea"
            :options="areaOptions"
            :props="{ value: 'name', label: 'name' }"
          ></el-cascader>
        </el-form-item>
      </el-col>
    </el-row>
    <div class="resume-edit-btns">
      <el-button
        size="small"
        type="primary"
        :loading="submiting"
        @click="submitForm"
        >保存并更新</el-button
      >
      <el-button size="small" type="info" @click="$emit('edit')">{{
        $t('action.cancel')
      }}</el-button>
    </div>
  </el-form>
</template>

<script>
import { dictMixin } from 'mixins'
import { updateResumePersonInfo } from 'services/student/resume'
import { allArea } from 'services/common'
export default {
  name: 'ResumeBasicEdit',
  mixins: [dictMixin],
  dicts: ['nation', 'marriage', 'politic_type', 'hukou_type'],
  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      formData: {},
      areaOptions: [],
      submiting: false
    }
  },
  computed: {
    rules() {
      return {
        name: this.$rule('resume.name', {
          required: true
        }),
        idCode: this.$rule('resume.idCode', {
          required: true
        }),
        sex: this.$rule('resume.sex', {
          required: true
        }),
        birthday: this.$rule('resume.birthday', {
          required: true
        }),
        hukouArea: this.$rule('resume.hukouAddr', {
          required: true
        }),
        livingArea: this.$rule('resume.livingAddr', {
          required: true
        }),
        height: this.$rule('resume.height', {
          required: true
        }),
        weight: this.$rule('resume.weight', {
          required: true
        }),
        nation: this.$rule('resume.weight', {
          required: true
        }),
        marriage: this.$rule('resume.marriage', {
          required: true
        }),
        parties: this.$rule('resume.parties', {
          required: true
        }),
        hukouType: this.$rule('resume.hukouType', {
          required: true
        })
      }
    }
  },
  methods: {
    async initData() {
      try {
        this.areaOptions = await allArea()
      } catch {}
    },
    async submitForm() {
      try {
        await this.$refs.form.validate()
        this.submiting = true
        const { hukouArea, livingArea } = this.formData
        const [hukouProvince, hukouCity, hukouCounty] = hukouArea
        const [livingProvince, livingCity, livingCounty] = livingArea
        await updateResumePersonInfo({
          ...this.formData,
          hukouProvince,
          hukouCity,
          hukouCounty,
          livingProvince,
          livingCity,
          livingCounty
        })
        this.$emit('edit')
        this.$bus.$emit('resume-update')
      } catch {
      } finally {
        this.submiting = false
      }
    }
  },
  created() {
    this.formData = { ...this.data }
    const {
      hukouProvince,
      hukouCity,
      hukouCounty,
      livingProvince,
      livingCity,
      livingCounty
    } = this.data
    this.formData.hukouArea = [hukouProvince, hukouCity, hukouCounty]
    this.formData.livingArea = [livingProvince, livingCity, livingCounty]
    this.initData()
  }
}
</script>
